<template>
  <div id="app">
    <div class="db">
      <van-nav-bar
        title="消息通知设置"
        left-text=""
        left-arrow
        @click-left="$router.push('/home/mine')"
        @click-right="onClickRight"
      />
    </div>
    <div class="container">
      <div class="text1">
        <van-cell style="font-size: 18px" center title="充电结束提醒">
          <template #right-icon>
            <van-switch v-model="checked" size="24" />
          </template>
        </van-cell>
        <span class="ts">充电异常终止、拔枪结束等会收到消息提示</span>
      </div>
      <div class="text2">
        <van-cell style="font-size: 18px" center title="爱车点亮充满提醒">
          <template #right-icon>
            <van-switch v-model="checked1" size="24" />
          </template>
        </van-cell>
        <!-- <div class="ts">
          <span>剩余充满时间为15分钟时会收到消息提醒</span>
          <div id="button">
            <van-button
              @click="toggle1 = !toggle1"
              :style="{
                color: toggle1 ? 'rgb(48, 197, 222)' : 'black',
                'background-color': toggle1 ? '#f0fbfd' : 'white',
                'border-color': toggle1 ? '#f0fbfd' : 'grey',
              }"
              class="b1"
              plain
              type="info"
              >5分钟</van-button
            >
            <van-button
              @click="toggle2 = !toggle2"
              :style="{
                color: toggle2 ? 'rgb(48, 197, 222)' : 'black',
                'background-color': toggle2 ? '#f0fbfd' : 'white',
                'border-color': toggle2 ? '#f0fbfd' : 'grey',
              }"
              class="b1"
              plain
              type="info"
              >10分钟</van-button
            >
            <van-button
              @click="toggle3 = !toggle3"
              :style="{
                color: toggle3 ? 'rgb(48, 197, 222)' : 'black',
                'background-color': toggle3 ? '#f0fbfd' : 'white',
                'border-color': toggle3 ? '#f0fbfd' : 'grey',
              }"
              class="b1"
              plain
              type="info"
              >15分钟</van-button
            >
            <van-button
              @click="toggle4 = !toggle4"
              :style="{
                color: toggle4 ? 'rgb(48, 197, 222)' : 'black',
                'background-color': toggle4 ? '#f0fbfd' : 'white',
                'border-color': toggle4 ? '#f0fbfd' : 'grey',
              }"
              class="b1"
              plain
              type="info"
              >20分钟</van-button
            >
          </div>
        </div> -->
        <span class="span1">剩余充满时间为{{ now }}分钟时会收到消息提醒</span>
        <div class="span0" v-if="checked">
          <van-button
            value="now"
            class="button"
            @click="now = item"
            :class="{ active: item == now }"
            v-for="(item, i) in items"
            :key="i"
            type="default"
            >{{ item }}</van-button
          >
        </div>
        <van-cell
          style="
            font-size: 18px;
            border-top: 1px solid rgba(112, 111, 111, 0.712);
          "
          center
          title="推荐我可能感兴趣的资讯、促销活动"
        >
          <template #right-icon>
            <van-switch v-model="checked2" size="24" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  methods: {
    onClickLeft() {
      //   Toast('返回');
      this.$router.push("/mine");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
  data() {
    return {
      checked: true,
      checked1: true,
      checked2: true,
      // toggle1: false,
      // toggle2: false,
      // toggle3: false,
      // toggle4: false,
      now: "5分钟",
      items: ["5分钟", "10分钟", "15分钟", "20分钟"],
      checked: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: gainsboro;
  .ts {
    padding: 10px;
    display: block;
    color: lightseagreen;
    border-top: 1px solid rgba(112, 111, 111, 0.712);
    #button {
      text-align: center;
      .b1 {
        margin: 5px;
      }
    }
  }
}
.span0 {
  display: flex;
  justify-content: space-around;

  font-size: 12px;
  margin-top: 10px;
  z-index: 3;
}

.span1 {
  color: rgba(184, 184, 184);
  font-size: 16px;
  top: 10px;
}
.button.active {
  background-color: #f0fbfd;
  color: #1ec0d5;
  border-radius: 6px;
}
</style>